<template>
  <div class="el-video">
    <div id="xgplayer" class="xgplayer"></div>
  </div>
</template>

<script setup>
// 引入西瓜播放器
import Player from 'xgplayer';
import "xgplayer/dist/index.min.css";
import { ref, onMounted } from 'vue'

const res = defineProps({
  src: {
    type: String,  // 参数类型
    default: '222.mp4'
  }
})
let videoSrc = ref('/store/sop/video/' + res.src)
// console.log('viode', res.src)

onMounted(() => {
  let player = new Player({
    "id": "xgplayer",
    "url": videoSrc.value,
    'lang': 'zh-cn',
    "playsinline": true,
    "whitelist": [
      ""
    ],
    // "autoplay": true,
    "fluid": true,
    "playbackRate": [
      0.75,
      1,
      1.25,
      1.5,
      2
    ],
    "progressDot": [
      {
        "time": 3,
        "text": "text1"
      },
      {
        "time": 5,
        "text": "text2"
      },
      {
        "time": 32,
        "text": "text3"
      },
      {
        "time": 36,
        "text": "text4"
      }
    ],
    "thumbnail": {
      "pic_num": 44,
      "width": 160,
      "height": 90,
      "col": 10,
      "row": 10,
      "urls": [
        ""
      ]
    },
    "screenShot": true,
    "download": true,
    "pip": true
  });
})


</script>

<script>
export default {
  name: 'ElVideo',
  // props: {
  //   src: {
  //     type: String,
  //     required: true
  //   }
  // },
  data() {
    return {
      // player: null,
      // videoSrc: '/store/' + this.src
    }
  },
  methods: {

  },
  mounted() {

  },
  beforeDestroy() {

  }
}
</script>

<style scoped>
.xgplayer {
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 12px;
  background-color: #e0f6ff;
  /* background-color: rgba(255, 255, 255, 0);  */
}
.el-video {
  width: 100%;
  /* height: 450px; */
}
</style>